<template>
  <div>
    <a-card class="card" :bordered="false" title="设备信息">
      <detail-list>
        <detail-list-item term="设备名称">{{
          data.deviceName
        }}</detail-list-item>
        <detail-list-item term="唯一标识">{{
          data.uniqueCode
        }}</detail-list-item>
        <detail-list-item term="IP地址">{{ data.ipAddr }}</detail-list-item>
        <detail-list-item term="创建时间">{{
          data.gmtCreate
        }}</detail-list-item>
        <detail-list-item term="更新时间">{{
          data.gmtModified
        }}</detail-list-item>
      </detail-list>
    </a-card>
    <a-card class="card" :bordered="false" title="所属产品">
      <detail-list>
        <detail-list-item term="产品名称">{{
          data.product.productName
        }}</detail-list-item>
        <detail-list-item term="唯一标识">{{
          data.product.uniqueCode
        }}</detail-list-item>
        <detail-list-item term="数据进制"
          >{{ data.product.dataBase }} 进制</detail-list-item
        >
        <detail-list-item term="数据长度"
          >{{ data.product.dataLength }} 字节</detail-list-item
        >
        <detail-list-item term="开始标识">{{
          data.product.dataStartFlag === null
            ? "无"
            : data.product.dataStartFlag
        }}</detail-list-item>
        <detail-list-item term="结束标识">{{
          data.product.dataEndFlag === null ? "无" : data.product.dataEndFlag
        }}</detail-list-item>
        <detail-list-item term="创建时间">{{
          data.product.gmtCreate
        }}</detail-list-item>
        <detail-list-item term="更新时间">{{
          data.product.gmtModified
        }}</detail-list-item>
      </detail-list>
    </a-card>
    <a-card class="card" :bordered="false" title="解析协议">
      <a-table
        row-key="id"
        style="margin-bottom: 24px"
        :columns="productDataColumns"
        :dataSource="data.product.productDataList"
        :pagination="false"
      >
      </a-table>
    </a-card>
  </div>
</template>

<script>
import DetailList from "../../../components/tool/DetailList";
import { deviceDetail } from "@/services/device";

const DetailListItem = DetailList.Item;

const productDataColumns = [
  {
    title: "解析名称",
    dataIndex: "dataName",
    key: "dataName",
  },
  {
    title: "数据单位",
    dataIndex: "dataUnit",
    key: "dataUnit",
  },
  {
    title: "开始下标",
    dataIndex: "startPos",
    key: "startPos",
  },
  {
    title: "结束下标",
    dataIndex: "endPos",
    key: "endPos",
  },
];

const data = {};

export default {
  name: "DeviceDetail",
  components: { DetailListItem, DetailList },
  data() {
    return {
      data,
      productDataColumns,
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      deviceDetail(this.$route.params.id).then((rep) => {
        this.data = rep.data.data;
      });
    },
  },
};
</script>

<style lang="less" scoped>
.title {
  color: @title-color;
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 16px;
}
.card {
  margin-bottom: 24px;
}
</style>
